<template>
	<d2-container>
		<template>
			<div class="form-area">
				<el-form ref="detailForm" :model="formData" label-width="110px" style="height:auto">
					<div class="form-title"><h3>基本信息</h3></div>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="入库单编号" prop="stockInOrderNo">
								<el-input type="text" v-model="formData.stockInOrder.stockInOrderNo" placeholder="系统自动生成" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="采购单编号" prop="relatedOrderNo">
								<el-input type="text" v-model="formData.stockInOrder.relatedOrderNo" placeholder="采购单编号" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
          <el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="供应商名称" prop="supplierName">
								<el-input type="text" v-model="formData.stockInOrder.supplierName" readonly></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="12">
							<el-form-item label="供应商编码" prop="supplierCode">
								<el-input type="text" v-model="formData.stockInOrder.supplierCode" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="入库门店" prop="shopName">
                <el-input type="text" v-model="formData.stockInOrder.shopName" readonly></el-input>
							</el-form-item>
						</el-col>
            <el-col :span="12">
							<el-form-item label="入库仓库" prop="repositoryName">
                <el-input type="text" v-model="formData.stockInOrder.repositoryName" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="库存类型" prop="stockType">
                <el-input :value="formData.stockInOrder.stockType == 1 ? '线下库存' : '线上库存'" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="入库状态" prop="stockInStatus">
								<el-input :value="formData.stockInOrder.stockInStatus == 1 ? '未入库' : formData.stockInOrder.stockStatus == 2 ? '部分入库' : '全部入库'" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="备注" prop="remark">
								<el-input type="textarea" :rows="4" v-model="formData.stockInOrder.remark" placeholder="请输入备注" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<div class="form-title"><h3>审核信息</h3></div>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="提交人" prop="submitor">
								<el-input type="text" v-model="formData.stockInOrder.submitor" placeholder="提交人" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="提交时间" prop="submitTime">
								<el-date-picker v-model="formData.stockInOrder.submitTime" type="datetime" placeholder="提交时间" readonly style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="审核人" prop="auditor">
								<el-input type="text" v-model="formData.stockInOrder.auditor" placeholder="审核人" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="审核时间" prop="authTime">
								<el-date-picker v-model="formData.stockInOrder.authTime" type="datetime" placeholder="审核时间" readonly style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="审核状态" prop="status">
								<el-input :value="formData.stockInOrder.status == 1 ? '审核中' : formData.stockInOrder.status == 2 ? '审核通过' : formData.stockInOrder.status == 3 ? '审核不通过' : '未提交'" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="审核说明" prop="authDesc">
								<el-input type="textarea" :rows="4" v-model="formData.stockInOrder.authDesc" placeholder="审核说明" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<div class="form-title"><h3>系统信息</h3></div>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="创建时间" prop="createTime">
								<el-date-picker v-model="formData.stockInOrder.createTime" type="datetime" placeholder="创建时间" readonly style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="创建人" prop="creator">
								<el-input type="text" v-model="formData.stockInOrder.creator" placeholder="创建人" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="修改时间" prop="reviseTime">
								<el-date-picker v-model="formData.stockInOrder.reviseTime" type="datetime" placeholder="修改时间" readonly style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="修改人" prop="reviser">
								<el-input type="text" v-model="formData.stockInOrder.reviser" placeholder="修改人" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<div class="form-title">
						<h3>明细信息</h3>
					</div>

					<el-row :gutter="20">
						<el-col :span="24">
							<!-- 入库单明细-关联采购单 -->
							<template>
								<div class="form-table">
									<el-table :data="formData.stockInOrder.detailList" stripe border style="width: 100%">
										<el-table-column prop="index" label="序号" width="50" type="index"></el-table-column>
										<el-table-column prop="productName" label="商品名称"></el-table-column>
                    <el-table-column prop="productCode" label="商品编码"></el-table-column>
										<el-table-column prop="productSkuName" label="SKU名称"></el-table-column>
										<el-table-column prop="productSkuCode" label="SKU编码"></el-table-column>
										<el-table-column prop="unitQuantity" label="采购数量"></el-table-column>
										<el-table-column prop="unitName" label="采购单位"></el-table-column>
										<el-table-column prop="stockInedQuantity" label="已入库数量"></el-table-column>
										<el-table-column prop="tobeStockInQuantity" label="待入库数量"></el-table-column>
                    <el-table-column prop="stockIningQuantity" label="入库中数量"></el-table-column>
									  <el-table-column prop="stockInableQuantity" label="可入库数量"></el-table-column>
                    <el-table-column prop="stockInQuantity" label="本次入库数量"></el-table-column>
                    <el-table-column prop="stockInUnit" label="入库单位"></el-table-column>
										<el-table-column prop="stockInUnit" label="入库状态" v-if="formData.stockInOrder.status == 2">
                      <template slot-scope="scope">{{scope.row.stockInStatus == 1 ? '未入库' : scope.row.stockInStatus == 2 ? '部分入库' : '全部入库'}}</template>
                    </el-table-column>
                    <el-table-column prop="storekeeper" label="入库人" v-if="formData.stockInOrder.status == 2"></el-table-column>
                    <el-table-column prop="stockInTime" label="入库时间" :formatter="forDateStockIn" v-if="formData.stockInOrder.status == 2"></el-table-column>
                    <el-table-column label="操作" width="110" v-if="formData.stockInOrder.status == 2">
											<template slot-scope="scope">
												<el-button plain type="primary" size="small" v-if="formData.stockInOrder.status == 2 && scope.row.stockInStatus == 1" @click.native.prevent="confirmStockIn(scope.$index, scope.row)">确认入库</el-button>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</template>
						</el-col>
					</el-row>

					<!-- 按钮 -->
					<el-row :gutter="20">
						<el-col :span="24">
							<el-form-item>
              <div class="form-submit">
									<el-button v-if="formData.stockInOrder.status == 0 || formData.stockInOrder.status == 3" class="form-cancle-btn" type="primary" @click="doSubmit()">提交</el-button>
									<el-button v-if="formData.stockInOrder.status == 1 && formData.stockInOrder.stockInStatus == 1" class="form-cancle-btn" type="primary" @click="doAuth()">审核</el-button>
									<el-button v-if="formData.stockInOrder.status == 2 && (formData.stockInOrder.stockInStatus == 1 || formData.stockInOrder.stockInStatus == 2)"	class="form-cancle-btn"	type="primary" @click="doStockInAll()">全部入库</el-button>
									<el-button class="form-cancle-btn" @click="closeCurrentPage()">关闭</el-button>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</template>

    <!-- 弹框-审核表单 -->
		<template>
			<el-dialog title="入库单审核" width="50%" :visible.sync="showAuthForm" :before-close="handleCloseAuthForm">
				<div class="form-area">
					<el-form ref="authForm" :model="authForm" :rules="rulesAuthForm" label-width="100px" style="height:auto">
						<div class="form-title"><h3>入库单审核</h3></div>
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="审核结果" prop="status">
									<el-radio-group v-model="authForm.status">
										<el-radio label="2" border>通过</el-radio>
										<el-radio label="3" border>不通过</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="审核说明" prop="authDesc">
									<el-input type="textarea" :rows="4" v-model="authForm.authDesc" placeholder="请输入审核说明"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				<div class="dialog-footer" slot="footer">
					<el-button @click="closeShowAuthForm()">取消</el-button>
					<el-button type="primary" @click="confirmAuthForm('authForm')">确定</el-button>
				</div>
			</el-dialog>
		</template>
	</d2-container>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import { findPurchaseStockInOrderAndDetailList, 
authPurchaseStockInOrder,
submitPurchaseStockInOrder,
confirmStockInPurchaseStockInOrder,
confirmStockInAllPurchaseStockInOrder
 } from '@api/stockIn/stockInOrder'
 import dayjs from 'dayjs'
export default {
  name: 'stockIn-purchaseStockInDetail',
  data () {
    return {
      purchaseStockInDetailId: '',
      formData: {
        stockInOrder: {
          id: '',
          stockInOrderNo: '',
          shopId: '',
          shopName: '',
          supplierId: '',
          supplierCode: '',
          supplierName: '',
          repositoryId: '',
          repositoryName: '',
          stockInQuantity: 0,
          relatedOrderId: '',
          relatedOrderNo: '',
          stockInType: '1',
          stockType: '',
          status: '0',
          stockInStatus: '1',
          remark: '',
          auditor: '',
          authTime: '',
          submitor: '',
          submitTime: '',
          createTime: '',
          creatorName: '',
          reviseTime: '',
          reviserName: '',
          detailList: []
        },
      },

      showAuthForm: false,
      authForm: {
        id: '',
        status: '',
        authDesc: ''
      },
      rulesAuthForm: {
        status: [{ required: true, message: '请选择审核结果', trigger: 'blur' }],
        authDesc: [{ required: true, message: '请输入审核说明', trigger: 'blur' }, { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }]
      },

	  isReturnList: false // 关闭页面是否返回列表
    }
  },
  created () {},
  mounted () {
    this.purchaseStockInDetailId = sessionStorage.getItem('purchaseStockInDetailId') == undefined ? '' : sessionStorage.getItem('purchaseStockInDetailId')
    this.authForm.id = this.purchaseStockInDetailId
    this.getStockInOrderAndDetailList()
  },
  beforeDestroy () {
	  if (this.isReturnList) {
      // 跳转到列表页面
      this.$router.push({
		  path: 'stockIn/purchaseStockInList',
		  name: 'stockIn-purchaseStockInList',
		  params: ''
      })
	  }
  },
  watch: {},
  computed: {
    ...mapState('d2admin/page', ['opened', 'current'])
  },
  methods: {
    ...mapActions('d2admin/page', ['close']),
    // 关闭
    closeCurrentPage () {
      // 关闭当前窗口
	    this.isReturnList = true
      let tagName = this.current
      this.close({ tagName })
    },
    getStockInOrderAndDetailList () {
        findPurchaseStockInOrderAndDetailList({id: this.purchaseStockInDetailId}).then(res => {
          if (res.code == '000000') {
            this.formData.stockInOrder = res.data
            this.formData.stockInOrder.stockType = this.formData.stockInOrder.stockType + ''
            this.formData.stockInOrder.status = this.formData.stockInOrder.status + ''
            if (this.formData.stockInOrder.status == 1) {
              this.formData.stockInOrder.auditor = ''
              this.formData.stockInOrder.authTime = ''
              this.formData.stockInOrder.authDesc = ''
            }
          } else {
            this.$message({ message: '采购单加载失败，请重试!', type: 'error' })
          }
        })
        .catch(err => {
          console.log('err', err)
        })
    },
    forDateStockIn (row, column) {
      return row.stockInTime == null ? '' : dayjs(row.stockInTime).format('YYYY-MM-DD HH:mm:ss')
    },
    // 提交
    doSubmit () {
          this.loading = true
          submitPurchaseStockInOrder({id: this.purchaseStockInDetailId})
            .then(res => {
              if (res.code == '000000') {
                this.$message({ message: res.message, type: 'success' })
                this.loading = false
                this.closeCurrentPage()
              } else {
                this.$message({ message: res.message, type: 'error' })
              }
            })
            .catch(err => {
              console.log('err', err)
              this.loading = false
            })
    },
    // 审核
    doAuth () {
      // 弹出审核框审核
      this.showAuthForm = true
    },
    handleCloseAuthForm (done) {
      this.authForm = {
        id: this.purchaseStockInDetailId,
        status: '',
        authDesc: ''
      }
      done()
    },
    closeShowAuthForm () {
      this.authForm = {
        id: this.purchaseStockInDetailId,
        status: '',
        authDesc: ''
      }
      this.showAuthForm = false
    },
    confirmAuthForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true

          authPurchaseStockInOrder(this.authForm)
            .then(res => {
              if (res.code == '000000') {
                this.$message({ message: res.message, type: 'success' })
                this.loading = false
                this.closeShowAuthForm()
                this.closeCurrentPage()
              } else {
                this.$message({ message: res.message, type: 'error' })
              }
            })
            .catch(err => {
              console.log('err', err)
              this.loading = false
            })
        }
      })
    },
    // 全部入库
    doStockInAll () {
      this.$confirm('确认全部入库？').then(_ => {
        this.loading = true
        confirmStockInAllPurchaseStockInOrder({
          id: this.purchaseStockInDetailId
        })
          .then(res => {
            if (res.code == '000000') {
              this.$message({ message: res.message, type: 'success' })
              this.closeCurrentPage()
              this.loading = false
            } else {
              this.$message({ message: res.message, type: 'error' })
            }
          })
          .catch(err => {
            console.log('err', err)
            this.loading = false
          })
      })
    },
    // 确认入库
    confirmStockIn (index, row) {
      this.$confirm('确认入库商品名称为【' + row.productName + '】？').then(_ => {
        this.loading = true
        confirmStockInPurchaseStockInOrder({
          detailId: row.id
        })
          .then(res => {
            if (res.code == '000000') {
              this.$message({ message: res.message, type: 'success' })
              this.closeCurrentPage()
              this.loading = false
            } else {
              this.$message({ message: res.message, type: 'error' })
            }
          })
          .catch(err => {
            console.log('err', err)
            this.loading = false
          })
      })
    }
  }
}
</script>
